<template>
  <view
    class="bi-order-card"
    :class="{ 'is-progress': data.orderStatus === 1 }"
    @click="handleClick">
    <view class="bi-order-card__body">
      <view class="bi-order-card__fields">


        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">车牌号：</text>
          <text class="bi-order-card__field-target">
            {{ data.vehiclePlate || ''}}
          </text>
        </view>

        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">车辆类型：</text>
          <text class="bi-order-card__field-target">
            {{ data.vehicleType==1?"DYNA" : data.vehicleType==2?"LORRY" : data.vehicleType===3?"TRAILER" : "未填写"}}
          </text>
        </view>
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">车辆归属公司：</text>
          <text class="bi-order-card__field-target">
            {{ data.vehicleOwnType ==='1' ?'内部车辆' : data.vehicleOwnType ==='2'?'外部派送车辆' : '未填写' }}
          </text>
        </view>
      </view>
      <view class="bi-order-card__toolbar" v-if="$slots.toolbar">
        <slot name="toolbar"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { sub5Hours,isLessThanOrEqualToEndOfNextMonth} from '@/apis/order.js';

export default {
  name: 'BiCarDeliveryCard',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    currentTimeType: {
      type: Number,
      default:null
    }
  },
  computed: {
    vehicleLicenceExpiringFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.vehicleLicenseExpireTime)
    },
    vehicleInsurenceExpiringFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.commercialInsuranceExpireTime)
    },
  },
  methods: {
    sub5Hours(currentTime){
      return sub5Hours(currentTime)
    },
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="less">
.bi-order-card {
  margin: 16px;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  line-height: 1.7em;
  text.is-light {
    color: #f47554;
  }
  &.is-progress {
    .bi-order-card__demand {
      color: #f47554;
    }
  }
  box-shadow: 5rpx 5rpx 8rpx #bfbfbf;

}
.bi-order-card__demand,
.bi-order-card__company {
  font-size: 16px;
  font-weight: bold;
  float: right;

}
.bi-order-card__linkman {
  font-size: 12px;
  color: #666;
}
.bi-order-card__head {
  border-bottom: 1px solid #e3e5e5;
  padding-bottom: 41rpx;
  margin-bottom: 41rpx;
}
.bi-order-card__field {
  display: flex;
  justify-content: space-between; /* 在子元素之间分配空间 */
  width: 100%; /* 确保容器宽度 */
  border-bottom: 1rpx solid #e3e5e5;
}
.bi-order-card__field-label {
  font-weight: bold;
  text-align: left; /* 可选，通常不需要，因为 flexbox 已处理 */
  width: 90%;
}
.bi-order-card__toolbar {
  padding: 4px 0;
}
.bi-order-card__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.bi-order-card__addon {
  padding-bottom: 3px;
}
.bi-order-card__notfilled {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 4px;
}
.bi-order-card__notfilled-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-top: -1px;
}
.bi-order-card__notfilled-text {
  color: #f00;
}
.bi-order-card__field-target{
  word-wrap: break-word;
  width: 100%;
  text-align: right;
  word-break: break-all;

}
.bi-order-card__field-expire{
  word-wrap: break-word;
  width: 100%;
  color: #f47554;
  font-size: 24rpx;
}
</style>
